import Vue from 'vue'
import App from './App.vue'
import router from './router'
// import store from './store'
import Vuex from 'vuex'

Vue.use(Vuex)

// state是状态的原始值、
// getter对state进行计算，并获取返回计算后的内容、
// mutation通过commit方法同步提交，改变state的值；
// action通过dispatch方法异步提交，改变state的值；
// Module 多个变量的组件开发

// const store = new Vuex.Store({
//   state: {
//     count: 101010,
//     count1: '第二个'
//   },
//   mutations: {
//     incrementTest (state) {
//       state.count++
//     }
//   }
// })
// const store = new Vuex.Store({
//   state: {
//     todos: [{
//       id: 1,
//       text: '...',
//       done: true
//     },
//     {
//       id: 2,
//       text: '...',
//       done: false
//     }
//     ]
//   },
//   getters: {
//     doneTodos: state => {
//       return state.todos.filter(todo => todo.done)
//     },
//     doneTodosCount: (state, getters) => {
//       return getters.doneTodos.length
//     },
//     getById: (state) => (id) => {
//       return state.todos.find(todo => todo.id === id)
//     }
//   }
// })

// mutations
// const store = new Vuex.Store({
//   state: {
//     count: 1,
//     countParams: 2,
//     countObj: 4,
//     countMap: 10
//   },
//   mutations: {
//     increment (state) {
//       console.log(111111)
//       // 变更状态
//       state.count++
//     },
//     incrementParams (state, n) {
//       state.countParams += n
//     },
//     incrementObj (state, payload) {
//       state.countObj += payload.amount
//     },
//     incrementMap (state) {
//       state.countMap += 4
//     }
//   }
// })

// Action 异步
// const store = new Vuex.Store({
//   state: {
//     count: 0,
//     countLocal: 4,
//     someCount: 1,
//     someOtherCount: 2
//   },
//   mutations: {
//     increment (state) {
//       state.count++
//     },
//     incrementLocal (state) {
//       state.countLocal += 4
//     },
//     someMutation (state) {
//       state.someCount += 5
//     },
//     someOtherMutation (state) {
//       state.someOtherCount += 6
//     }
//   },
//   actions: {
//     increment (context) {
//       context.commit('increment')
//     },
//     incrementLocal (context) { // 本地调用
//       context.commit('incrementLocal')
//     },
//     incrementAsync ({
//       commit
//     }) { // 异步调用settimeout
//       setTimeout(() => {
//         commit('increment')
//       }, 1000)
//     },
//     actionA ({
//       commit
//     }) {
//       console.log(111111)
//       return new Promise((resolve, reject) => {
//         console.log(2222)
//         setTimeout(() => {
//           console.log(333)
//           commit('someMutation')
//           resolve()
//         }, 1000)
//       })
//     },
//     actionB ({
//       dispatch,
//       commit
//     }) {
//       return dispatch('actionA').then(() => {
//         setTimeout(() => {
//           console.log(444)
//           commit('someOtherMutation')
//         }, 1000)
//       })
//     }

// 最后，如果我们利用 async / await (opens new window)，我们可以如下组合 action：

// 假设 getData() 和 getOtherData() 返回的是 Promise

// actions: {
//   async actionA ({ commit }) {
//     commit('gotData', await getData())
//   },
//   async actionB ({ dispatch, commit }) {
//     await dispatch('actionA') // 等待 actionA 完成
//     commit('gotOtherData', await getOtherData())
//   }
// }
// }
// })
const moduleA = {
  state: () => ({
    countA: 0,
    countA1: 2
  }),
  mutations: {
    increment (state) {
      // 这里的 `state` 对象是模块的局部状态
      state.countA++
    }
  },
  // actions: { ... },
  getters: {
    sumWithRootCount (state, getters, rootState) {
      // state 组件的本身
      // getter内容
      // rootState 包含所有的状态：a和 b
      console.log(state)
      console.log(getters)
      console.log(rootState.a)
      console.log(rootState.b)
      console.log(state.countA1 + rootState.b.countB)
      return state.countA1 + rootState.b.countB
    }
  },
  actions: {
    incrementIfOddOnRootSum ({
      state,
      commit,
      rootState
    }) {
      console.log(state.countA + rootState.a.countA)
      if ((state.countA + rootState.a.countA) % 2 === 1) {
        commit('increment')
      }
    }
  }
}

const moduleB = {
  state: () => ({
    countB: 3
  })
  // mutations: { ... },
  // actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

// store.state.a() // -> moduleA 的状态
// store.state.b() // -> moduleB 的状态

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
